<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%" @close="cancel">
      <el-table
          ref="tableRef"
          :data="tableDataAll"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          @select="handleChange"
          @selection-change="handleSelectionChange"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            type="selection"
            width="55"> <!--:selectable="handleSelectable"-->
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script >
export default {
  data(){
    return{
      dialogVisible:false,
      tableDataAll: [{
       id: 3,
       date: '2016-05-01',
       name: '王小虎3',
       parentId:0,
       address: '上海市普陀区金沙江路 1519 弄',
       children: [{
         id: 31,
         parentId:3,
         date: '2016-05-01',
         name: '王小虎31',
         address: '上海市普陀区金沙江路 1519 弄',
         estimate:''
       }, {
         id: 32,
         parentId:3,
         date: '2016-05-01',
         name: '王小虎32',
         address: '上海市普陀区金沙江路 1519 弄',
         estimate:''
       }, {
         id: 33,
         parentId:3,
         date: '2016-05-01',
         name: '王小虎33',
         address: '上海市普陀区金沙江路 1519 弄',
         estimate:'',
         children: [{
           id: 331,
           parentId:33,
           date: '2016-05-01',
           name: '王小虎331',
           address: '上海市普陀区金沙江路 1519 弄',
           children: [{
             id: 3311,
             parentId: 331,
             date: '2016-05-01',
             name: '3311',
             address: '上海市普陀区金沙江路 1519 弄',
             estimate:'',
           },{
               id: 3312,
               parentId: 331,
               date: '2016-05-01',
               name: '3312',
               address: '上海市普陀区金沙江路 1519 弄',
               estimate:'',
             }]
         }, {
           id: 332,
           parentId:33,
           date: '2016-05-01',
           name: '王小虎332',
           address: '上海市普陀区金沙江路 1519 弄',
           estimate:'',
         }, {
           id: 333,
           parentId:33,
           date: '2016-05-01',
           name: '王小虎333',
           address: '上海市普陀区金沙江路 1519 弄',
           estimate:'',
         }]
       }, {
           id: 44,
           parentId:3,
           date: '2016-05-01',
           name: '王小虎44',
           address: '上海市普陀区金沙江路 1519 弄',
           estimate:'',
           children: [{
             id: 441,
             parentId:44,
             date: '2016-05-01',
             name: '王小虎441',
             address: '上海市普陀区金沙江路 1519 弄',
             estimate:'',
           }, {
             id: 442,
             parentId:44,
             date: '2016-05-01',
             name: '王小虎442',
             address: '上海市普陀区金沙江路 1519 弄',
             estimate:'',
           }, {
             id: 443,
             parentId:44,
             date: '2016-05-01',
             name: '王小虎443',
             address: '上海市普陀区金沙江路 1519 弄',
             estimate:'',
           }]
         }]
     },{
       id: 100,
       date: '2016-05-01',
       name: '王小虎100',
       parentId:0,
       address: '上海市普陀区金沙江路 1519 弄',
       children: [{
         id: 101,
         parentId:100,
         date: '2016-05-01',
         name: '王小虎101',
         address: '上海市普陀区金沙江路 1519 弄',
         estimate:''
       }, {
         id: 102,
         parentId:100,
         date: '2016-05-01',
         name: '王小虎102',
         address: '上海市普陀区金沙江路 1519 弄',
         estimate:''
       }]}
     ],
      multipleSelection:[],
      tableDataresultId:[],
    }
  },
  created() {
  },
  methods:{
      init(tableDataresult){
        this.getResultid(tableDataresult);
        this.dialogVisible = true ;
        this.$nextTick(()=>{
          this.$refs.tableRef.clearSelection();
          this.selectTreeData(this.tableDataAll)
        })
      },

      selectTreeData(tableData){
        tableData.map(row => {
          if(this.tableDataresultId.includes(row.id)){
            this.$nextTick(()=>{
              this.$refs.tableRef.toggleRowSelection(row);
            })
          }
          if (row.children){
            this.selectTreeData(row.children)
          }
        });
      },

      getResultid(tableDataresult){
        tableDataresult.map(r=>{
          if (r.children){
            this.tableDataresultId.push(r.id)
            this.getResultid(r.children)
          }else{
            this.tableDataresultId.push(r.id)
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    submit(){
      let arr = JSON.parse(JSON.stringify(this.multipleSelection))
        arr.forEach(item=>
        {
          Vue.delete(item,'children')
        })
      this.$emit('sendSelectRow', arr)
      this.cancel()
    },


    cancel(){
      this.multipleSelection = []
      this.tableDataresultId = []
      this.dialogVisible = false ;
      // this.$emit('close',close)
    },
    handleChange(selection,row){
      const rows = []
      rows.push(row)
      const ids = this.getRowChildIds(rows,[])
      if(this.tableDataresultId.includes(row.id)){
        ids.forEach(id => {
          this.tableDataresultId = this.tableDataresultId.filter(i => i !== id);
        });
      }else{
        const pIds = this.getRowParentIds(this.tableDataAll,row.id,[],0)
        pIds.forEach(id => {
          if(!ids.includes(id) && id!=0){
            ids.push(id)
          }
        })
        ids.forEach(id => {
          if(!this.tableDataresultId.includes(id)){
            this.tableDataresultId.push(id)
          }  
        });
      }
      this.$nextTick(()=>{
        this.$refs.tableRef.clearSelection();
        this.selectTreeData(this.tableDataAll)
      })
    },

    getRowChildIds(row,ids){
      row.map(r=>{
          if (r.children){
            ids.push(r.id)
            this.getRowChildIds(r.children,ids)
          }else{
            ids.push(r.id)
          }
      })
      return ids
    },
    getRowParentIds(tableData,id,ids,pid){
      tableData.map(r=>{
          if(r.id == id ){
            if(!ids.includes(pid)){
              ids.push(pid)
            }  
            this.getRowParentIds(this.tableDataAll,pid,ids,0)
          }else{
            if (r.children){
              this.getRowParentIds(r.children,id,ids,r.id)
            }
          }
      })
      return ids
    },

     
    handleSelectable(row, index) {
      // 如果状态不等于 '0'，则不允许选择
      return !row.disabled;
    },

  }
}
</script>

<style scoped>

</style>
